<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> costAnalysis页面 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="${pageContext.request.contextPath}/jsp/js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="${pageContext.request.contextPath}/jsp/js/bding_jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/jsp/js/highcharts.js"></script>

<!-- 
	主要做两件事：
	查找某月的总量, 以及月份之间 
	需要两个框，如果其中任意一个框中有时间就执行 aMonth() ，都有的话执行 setMonth() ，通过costAnalysis()分辨。
-->

<script type="text/javascript">

$(document).ready(function() {
	var data = "";
	PieChart(data);
	ColumnChart(data);
	costAndMachineTask(data);
});

function costAnalysis() {
	var startTime = document.getElementById('startTime').value;
	var endTime = document.getElementById('endTime').value;
	var taskName = "";
	alert(startTime+","+endTime);
	if(startTime != "" && endTime == ""){
		alert('查找某月');
		$.ajax({
			data : {startTime: startTime },
			dataType : 'json',
			url:'${pageContext.request.contextPath }/reportSummary/selectAllDataByTime.action',
			success : function(data){
				PieChart(data);
				ColumnChart(data);
			}
		});
	} else if (startTime != "" && endTime != "") {
		alert('查找月份之间');
		alert(startTime+','+endTime);
		$.ajax({
			data : {
				startTime: startTime, 
				endTime: endTime
			},
			dataType : 'json',
			url:'${pageContext.request.contextPath }/machine/selectMonthBySetTime.action',
			success : function(data){
				PieChart(data);
				ColumnChart(data);
			}
		});
	} else if (startTime == "" && endTime != ""){
		alert('搜索任务名成本！');
		$.ajax({
			data: { taskname : endTime },
			dataType : 'json',
			url:'${pageContext.request.contextPath }/machine/costAndMachineTask.action',
			success:function(data){
				costAndMachineTask(data); 
			}
		});
	}
}

function PieChart(data){
	var startTime = "";
	var type = [];
	var monthTotal = [];
	var arr = [];
	
	if(data != ""){
		startTime = document.getElementById('startTime').value;
		monthTotal = data.monthTotal;
		type = data.listType;
		$.each(type,function(i,item){
			arr.push([type[i],monthTotal[i]]);
		})
		
	} else {
		arr = [
		      ['Firefox',   45.0],
		      ['IE',       26.8],
		      {
		         name: 'Chrome',
		         y: 12.8,
		         sliced: true,
		         selected: true
		      },
		      ['Safari',    8.5],
		      ['Opera',     6.2],
		      ['Others',   0.7]
		   ];
	}
	
	/* var chart = {
	    plotBackgroundColor: null,
	    plotBorderWidth: null,
	    plotShadow: false
	};
	var title = {
	   text: startTime + '月的总消耗比例'   
	};      
	var tooltip = {
	   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	};
	var plotOptions = {
	   pie: {
	      allowPointSelect: true,
	      cursor: 'pointer',
	      dataLabels: {
	         enabled: true,
	         format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
	         style: {
	            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	         }
	      }
	   }
	};
	var series= [{
	   type: 'pie',
	   name: 'Browser share',
	   data: arr
	}];     
	   
	var json = {};   
	json.chart = chart; 
	json.title = title;     
	json.tooltip = tooltip;  
	json.series = series;
	json.plotOptions = plotOptions;
	$('#PieHC').highcharts(json);  */
	var chart = new Highcharts.Chart({
		chart: {
			type: 'pie',
			renderTo: 'PieHC'
		},
		title: {
			text: startTime + '月的总消耗比例'
		},
		credits: {		//版权信息
			enabled: false
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		series: [{
			   type: 'pie',
			   name: 'Browser share',
			   data: arr
			}],     
		plotOptions: {
			pie: {
			      allowPointSelect: true,
			      cursor: 'pointer',
			      dataLabels: {
			         enabled: true,
			         format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
			         style: {
			            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
			         }
			      }
			   }
		}
	});
}

function ColumnChart(data) {
	var totalCost = [];
	var xAxiss = [];
	var title = "";
	
	if(data !="" ){
		totalCost = data.totalCost;
		xAxiss = data.listType;
		title = data.starttime;
	} else {
		totalCost = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6];
		xAxiss = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];
		title = '2016-10';
	}
/* 	
	var chart = {
		type: 'column'
	};
	var title = {
	   text: title+' 能源总成本'   
	};
	var subtitle = {
	   text: ''  
	};
	var xAxis = {
	   categories: xAxiss,
	   crosshair: true
	};
	var yAxis = {
	   min: 0,
	   title: {
	      text: '/ＲＭＢ (￥)'         
	   }      
	};
	var tooltip = {
	   headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	   pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
	   footerFormat: '</table>',
	   shared: true,
	   useHTML: true
	};
	var plotOptions = {
	   column: {
	      pointPadding: 0.2,
	      borderWidth: 0
	   }
	};  
	var credits = {
	   enabled: false
	};
	
	var series= [{
	     name: title,
	     data: totalCost
	     }];    */  
	
	var chart = new Highcharts.Chart({
		chart: {
			type: 'column',
			renderTo: 'ColumnHC',
		},
		title: {
			text: title+' 能源总成本'
		},
		credits: {
			enabled: false
		},
		xAxis: {
			categories: xAxiss,
			crosshairs: true
		},
		yAxis: {
			min: 0,
			title: {
				text: '/ＲＭＢ (￥)'
			}
		},
		series: [{		
			name: title,
			data: totalCost
		}],
		toolkip: {		
			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		    footerFormat: '</table>',
		    shared: true,
		    useHTML: true
		}	
		
	}); 
 
}

function costAndMachineTask(data) { 
	var taskNameCost = [];
	var xAxises = [];
	var ems = [];
	
	if(data == ""){
		taskNameCost = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
		xAxises = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
		ems = '任务名';
	} else {
		taskNameCost = data.taskNameCost;
		xAxises = data.listType;
		ems = data.taskName;
	}
	
	/* var chart = {
	   type: 'column'
	};
	var title = {
	   text: '能源总成本'   
	};
	var subtitle = {
	   text: ems 
	};
	var xAxis = {
	   categories: xAxises,
	   crosshair: true
	};
	var yAxis = {
	   min: 0,
	   title: {
	      text: 'Rainfall (mm)'         
	   }      
	};
	var tooltip = {			   
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
	   shared: true,
	   useHTML: true
	};
	var plotOptions = {
	   column: {
	      pointPadding: 0.2,
	      borderWidth: 0
	   }
	};  
	var credits = {
	   enabled: false
	};
	
	var series= [{
	     name: ems,
	     data: taskNameCost
	     
	}];     
	   
	var json = {};   
	json.chart = chart; 
	json.title = title;   
	json.subtitle = subtitle; 
	json.tooltip = tooltip;
	json.xAxis = xAxis;
	json.yAxis = yAxis;  
	json.series = series;
	json.plotOptions = plotOptions;  
	json.credits = credits;
	$('#CostTaskHC').highcharts(json); */
	var chart = new Highcharts.Chart({
		chart: {
			type: 'column',
			renderTo: 'CostTaskHC',
		},
		title: {
			text: '能源总成本'
		},
		subtitle: {
			   text: ems 
		},
		credits: {
			enabled: false
		},
		xAxis: {
			categories: xAxises,
			crosshair: true
		},
		yAxis: {
			min: 0,
		    title: {
		      text: 'Rainfall (mm)'         
		    }  
		},
		series: [{		
			name: ems,
		    data: taskNameCost
		}],
		plotOptions: {
		   column: {
		      pointPadding: 0.2,
		      borderWidth: 0
		   }
		},
		toolkip: {		
			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
			footerFormat: '</table>',
		    shared: true,
		    useHTML: true
		}	
		
	}); 
}

	function analysisUpdate() {
		$.ajax({
			type: 'post',
			url: '${pageContext.request.contextPath }/jsp/costAnalysisUpdate.jsp',
			dataType: 'html',
			success: function(data) {
				$("#chart").html(data);
			}
			
		});
	}
</script>
</head>
<body>

<!-- 就是按月查找，四张图，一张饼图，一张柱状图，一张曲线图，一份报告-->
<div id = "select" style="width: 1220px; height: 140px; background-color:#D3D3D3; margin: 0 auto;" >
	<div style="line-height: 140px;margin-left: 50px; ">
		<span style="font-size: 23px;">时间：</span><input id ="startTime" type="text" style="width:150px;height:30px;"/>
		<span style="font-size: 23px;">至</span>&nbsp<input id ="endTime" type="text" name="object" style= " width:150px; height:30px;"/>
		&nbsp<input type="button" onclick="costAnalysis()" value="查询"  style="width:150px;height:30px;"/>
	</div>
</div>
<div id = "chart" style="background-color:white ; width: 1220px; height: 900px;margin: 0 auto;margin-top: 0.2cm" >

	<div id="PieHC" style="width: 550px; height: 400px; float:left; border-style: groove;margin: 20px 30px 30px 20px;"></div>
	
	<!-- 成本分析报告 -->
	<div id="report" style="width: 550px; height: 400px; float:left;border-style: groove; margin: 20px 30px 30px 20px;">
		<div style="
			width:100px; height:30px;border-style: groove; border-radius:10px; text-align:center;line-height:30px;
			float:right;margin-right: 30px;margin-top: 0.3cm;">
			<a href="${pageContext.request.contextPath }/jsp/costAnalysisUpdate.jsp" style="text-decoration:none;"> 成本设置 </a>
		</div>
		<div style="
			width:500px; height:150px; border-style: ridge; float:right; margin-right: 30px;margin-top: 0.3cm;">
			<div style="height:30px;" >
				<p style="float:left;margin-left:20px;">本月 万元/每吨能耗</p>
				<a href="javascript:void(0);" onclick="analysisUpdate()" href=" ${pageContext.request.contextPath }/jsp/costAnalysisUpdate.jsp"
				style=" text-decoration:none; width:100px; height:30px;border-style: groove; border-radius:10px; text-align:center; line-height:30px;
			float:right;margin-right: 30px; margin-top: 0.3cm;"> 操作  </a>
			</div>
			<div style="height:50px;width:500px;">
				<h2><span id="costManager" ></span></h2><p style="float:left;margin-left:20px;">3 万元/m³</p>
			</div>
			<div style =" height:30px ; width:460px; border-style: ridge; margin-left:10px; ">
					<p style="float:left; font-size:12px;margin-left:10px;">预算：2.3%<span id="costManager "></span></p>
					<p style="float:right; font-size:12px; margin-right:30px;">同比：2.3%<span id="costManager "></span></p>
			</div>
		</div>
		<br></br>
		<div style="
			width:500px; height:150px; border-style: ridge; float:right;  margin-right: 30px;margin-top: 0.3cm;">
			<div style="height:30px;" >
				<p style="float:left;margin-left:20px;">本月 能源收入比</p>
				<a href="#"
				style=" text-decoration:none; width:100px; height:30px;border-style: groove; border-radius:10px; text-align:center; line-height:30px;
			float:right;margin-right: 30px; margin-top: 0.3cm;"> 操作  </a>
			</div>
			<div style="height:50px;width:500px;">
				<h2><span id="costManager" >7.32%</span></h2>
			</div>
			<div style =" height:30px ; width:460px; border-style: ridge; margin-left:10px; ">
					<p style="float:left; font-size:12px; margin-left:10px;">考核：<span id="costManager "></span></p>
					<p style="float:right; font-size:12px; margin-right:30px;">同比：2<span id="costManager "></span></p>
			</div>
		</div>
		<br></br>
	</div>
	
	<div id="ColumnHC" style="width: 550px; height: 400px; float:left;border-style: groove;margin: 20px 30px 30px 20px;"></div>
	<div id="CostTaskHC" style="width: 550px; height: 400px; float:left; border-style: groove;margin: 20px 30px 30px 20px;"></div>
</div>
	
</body>
</html>